<template>
	<view class="user-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="二维码"></uni-navbar></view>

		<view class="img-box">
			<image class="img Poster" data-etype="image" :data-enode="bgSrc" :src="bgSrc" mode="widthFix"></image>
			<view class="info-text Poster" :data-etype="type" :data-enode="name">{{ name }}</view>
			<view class="info-image">
				<image class="Poster" data-etype="image" :data-enode="qrcodeSrc" :src="qrcodeSrc" :show-menu-by-longpress="true" mode="widthFix"></image>
				<uni-qrcode class="qrcode" id="uqrcode" ref="uqrcode" :text="text"></uni-qrcode>
			</view>

			<image class="poster-img" :src="posterImg" :show-menu-by-longpress="true" mode="widthFix"></image>
		</view>

		<uni-poster width="750" height="1200" :list="list" @on-success="onSuccess" @on-error="onError" ref="Eposter"></uni-poster>

		<view class="fiexd-btm">
			<view class="flex-box">
				<u-button class="form-btn" type="error" shape="circle" @click="save('Poster')">
					<block v-if="qrcodeSrc">保存到手机</block>
					<block v-else>生成二维码</block>
				</u-button>
				<u-button class="form-btn" shape="circle" @click="back">关闭</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import uniQrcode from '@/components/uni-qrcode/uni-qrcode.vue';
import uniPoster from '@/components/uni-poster.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniQrcode,
		uniPoster
	},
	data() {
		return {
			id: '',
			name: '',
			text: '',
			size: 190,
			qrcodeSrc: '',
			list: [],
			posterImg: '',
			type: 'text',
			bgSrc: 'https://zxtemp.tanghecms.com/taian/static/img/bg_04.jpg'
		};
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id;
			this.name = decodeURI(option.name);

			if (this.name.length > 9) {
				this.type = 'textarea';
			}
			console.log(this.type);
		}

		this.loadLogin();
		this.loadData();
		this.text = 'https://zxtemp.tanghecms.com/thrd_weicheng_ui/login.html?id=' + this.id;
		// this.text = 'https://zxtemp.tanghecms.com/thrd_weicheng_ui/login.html?id=1b37a73351cb456fa4988f40fd43a483';
	},
	onReady() {
		// this.$nextTick(() => {
		// 	this.$nextTick(() => {
		// 		setTimeout(() => {
		// 			this.share('Poster');
		// 		}, 250);
		// 	});
		// });
	},
	onShareAppMessage(res) {
		return {
			title: this.name,
			path: '/pages/condi/app?id=' + this.id + '&name=' + this.name
		};
	},
	onShareTimeline(res) {
		return {};
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				// this.$logout();
				uni.login({
					provider: 'weixin',
					success: (res) => {
						if (res.code) {
							this.jsCode = res.code;
							console.log(this.jsCode);
						} else {
							console.log('登录失败！' + res.errMsg);
						}
					}
				});
			}
		},
		share(elClass) {
			this.$refs.uqrcode.toTempFilePath({
				success: (res) => {
					this.qrcodeSrc = res.tempFilePath;
					// this.$refs.Eposter.createForElRect(elClass, false);
				},
				fail: (res) => {
					console.log(res);
				}
			});
		},
		loadData() {
			this.$request('/minqingzhitong/msLiaisonStation/get', {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				if (res.data.msLiaisonStation.qrCode) {
					this.qrcodeSrc = this.$imagePreview(res.data.msLiaisonStation.qrCode);
				}
			});
		},
		save(elClass) {
			if (!this.qrcodeSrc) {
				this.share();
				return false;
			}
			// if (!this.posterImg) {
			// 	this.$refs.Eposter.createForElRect(elClass, false);
			// 	return false;
			// }
			this.$refs.Eposter.createForElRect(elClass, false);
		},
		onSuccess(val) {
			this.posterImg = val;
			console.log('onSuccess', val);
			this.saveImg(this.posterImg);
		},
		onError(err) {
			console.log(`err`, err);
		},
		saveImg(filePath) {
			uni.saveImageToPhotosAlbum({
				filePath,
				success: (res) => {
					this.$msg('图片保存成功');
				},
				fail: (error) => {
					this.$msg('图片保存失败');
				}
			});
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.img-box {
	position: relative;
	width: 100%;
	height: 1200rpx;

	.img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 1200rpx;
	}

	.poster-img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 1200rpx;
		z-index: -100;
	}
}

.info-text {
	position: absolute;
	top: 246rpx;
	left: 50%;
	max-width: 500rpx;
	min-width: 400rpx;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	line-height: 50rpx;
	text-align: center;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.info-image {
	position: absolute;
	top: 766rpx;
	left: 50%;
	width: 190px;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.qrcode {
	position: fixed;
	left: -100vw;
}

.web-view {
	display: block;
}

.fiexd-btm {
	// position: static;
	padding: 30rpx;
	bottom: 30rpx;
}
</style>
